<template>
	<div class="rich-text-container">
		<p class="close"><Icon type="md-close" @click="close"/></p>
		<div class="rich-text-contents" v-html="richText"></div>
	</div>
</template>

<script>
export default {
	props: {
		richText: {
			type: String,
			default: () => '',
			required: true
		}
	},
	methods: {
		close() {
			this.$emit('close');
		}
	}
};
</script>

<style lang="less" scoped>
.rich-text-container {
	position: absolute;
	top: 0;
	width: 90%;
	margin: 20% 5%;
	padding: 10px;
	border-radius: 12px;
	z-index: 400;
	height: 70%;
	overflow-y: scroll;
	background-color: #fff;
	.close {
		text-align: right;
		i {
			font-size: 24px;
			font-weight: 700;
		}
		position: fixed;
		width: 100%;
		right: 8%;
	}
	.rich-text-contents {
		padding-top: 20px;
		overflow-wrap: anywhere;
		text-align: left;
	}
}
</style>
<style lang="less">
.rich-text-contents {
	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	table,
	pre {
		margin: 10px 0;
		line-height: 1.5;
	}

	ul,
	ol {
		margin: 10px 0 10px 20px;
		display: block;
		list-style-type: disc;
		margin-block-start: 1em;
		margin-block-end: 1em;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
		padding-inline-start: 20px;
		line-height: 1.5rem;
	}

	blockquote {
		display: block;
		border-left: 8px solid #d0e5f2;
		padding: 5px 10px;
		margin: 10px 0;
		line-height: 1.4;
		font-size: 100%;
		background-color: #f1f1f1;
	}

	code {
		display: inline-block;
		background-color: #f1f1f1;
		border-radius: 3px;
		padding: 3px 5px;
		margin: 0 3px;
	}

	pre {
		code {
			display: block;
		}
	}

	table {
		border-top: 1px solid #ccc;
		border-left: 1px solid #ccc;

		td,
		th {
			border-bottom: 1px solid #ccc;
			border-right: 1px solid #ccc;
			padding: 3px 5px;
			min-height: 30px;
			height: 30px;
		}

		th {
			border-bottom: 2px solid #ccc;
			text-align: center;
			background-color: #f1f1f1;
		}
	}

	&:focus {
		outline: none;
	}

	img {
		cursor: pointer;

		&:hover {
			box-shadow: 0 0 5px #333;
		}
	}

	.w-e-todo {
		margin: 0 0 0 20px;
		li {
			list-style: none;
			font-size: 1em;
			span:nth-child(1) {
				position: relative;
				left: -18px;
				input {
					position: absolute;
					margin-right: 3px;
				}
				// 防止其他样式通过属性选择器重置input样式
				input[type='checkbox'] {
					top: 50%;
					margin-top: -6px;
				}
			}
		}
	}
	h1 {
		font-size: 32px !important;
		margin: 10px 0;
		line-height: 1.5;
		margin-block-start: 0.67em;
		margin-block-end: 0.67em;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
		font-weight: bold;
	}
	h2 {
		margin: 10px 0;
		line-height: 1.5;
		font-size: 24px !important;
		display: block;
		margin-block-start: 0.83em;
		margin-block-end: 0.83em;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
		font-weight: bold;
	}
	h3 {
		margin: 10px 0;
		line-height: 1.5;
		font-size: 18.72px !important;
		display: block;
		margin-block-start: 1em;
		margin-block-end: 1em;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
		font-weight: bold;
	}
	h4 {
		margin: 10px 0;
		line-height: 1.5;
		font-size: 16px !important;
		display: block;
		margin-block-start: 1.33em;
		margin-block-end: 1.33em;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
		font-weight: bold;
	}
	h5 {
		margin: 10px 0;
		line-height: 1.5;
		font-size: 13.28px !important;
		display: block;
		margin-block-start: 1.67em;
		margin-block-end: 1.67em;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
		font-weight: bold;
	}
	p {
		font-size: 16px !important;
		display: block;
		margin-block-start: 1em;
		margin-block-end: 1em;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
	}
	b {
		font-weight: bold;
	}
}
</style>
